<template>
  <div class="wrapper" @click.stop="">
    <transition name="fade">
      <span v-show="food.count > 0" class="decrease iconfont" @click="shop(-1)">
        &#xe617;
      </span>
    </transition>
    <span class="num" v-show="food.count > 0">{{food.count}}</span>
    <span class="increase iconfont" @click="shop(1)">&#xe604;</span>
  </div>
</template>

<script>
// import Vue from 'vue'
import { mapState } from 'vuex'
export default {
  name: 'ShopAct',
  props: {
    food: Object
  },
  data () {
    return {
      shopNum: this.count || 0
    }
  },
  computed: {
    ...mapState(['sellectFoods'])
  },
  methods: {
    shop (num) {
      this.food.count += num
      if (num === 1 && this.food.count === 1) {
        // 说明是第一次添加购物车中，所以购物车要添加这个 food
        this.sellectFoods.push(this.food)
      }
      if (this.food.count <= 0) {
        // 此 food 的count 减为 0，则需要把这个 food 移除购物车
        this.food.count = 0
        this.sellectFoods.splice(this.sellectFoods.indexOf(this.food), 1)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .fade-enter, .fade-leave-to
    opacity 0
    transform translateX(.5rem) rotate(180deg)
    transform-origin center center
  .fade-enter-active, .fade-leave-active
    transition .5s
  .wrapper
    display inline-block
    font-size 0
    .num
      display inline-block
      width .5rem
      text-align center
      font-size .28rem
      margin-top .20rem
      vertical-align top
    .iconfont
      display inline-block
      color rgb(0, 160, 220)
      font-size .38rem
      padding .1rem
    .decrease
      font-weight 600
    .increase
      font-size .45rem
</style>
